<script>
  import moment from 'moment';
  import {onMount} from 'svelte';
  import {createEventDispatcher} from 'svelte';

  const dispatch = createEventDispatcher();

//   let startDate = moment().format("YYYY-MM-DD");
//   let endDate = moment().format("YYYY-MM-DD");
  let isShowSureBtn = true;
  var str = false;
  let active = false
  let role = '普通用户'
  let routeStatus = false
  let adminOrUser = false
  let type = 1
  export let query
  export let handler

  onMount(() => {
    if (localStorage.getItem("uid") == -1) {
      adminOrUser = true
    } else {
      adminOrUser = false
    }
    if ((window.location.hash == '#/twoagents') || (window.location.hash == '#/threeagents')) {
      routeStatus = false
    } else {
      routeStatus = true
    }
    laydate.render({
      elem: '#startDate',
      value: moment().startOf('month').format("YYYY-MM-DD"),
      done: (val, date) => {
        let startDate = moment(val).format("YYYY-MM-DD")+' 00:00:00'
		console.log(startDate);
		sessionStorage.setItem("startDate",startDate);
      }
    });

    laydate.render({
      elem: '#endDate',
      value: new Date(),
      done: (val, date) => {
		let endDate =  moment(val).format("YYYY-MM-DD")+' 23:59:59'
		console.log(val);
		sessionStorage.setItem("endDate",endDate);
      }
	});



	
	// var start = {
	// 	istime: true,
	// 	format: 'YYYY-MM-DD hh:mm:ss',
	// 	max: '2099-06-16 23:59:59',
	// 	istoday: true,
	// 	choose: function (datas) {
	// 		end.min = datas; //开始日选好后，重置结束日的最小日期
	// 	}
	// };
	// var end = {
	// 	istime: true,
	// 	format: 'YYYY-MM-DD hh:mm:ss',
	// 	max: '2099-06-16 23:59:59',
	// 	istoday: true,
	// 	choose: function (datas) {
	// 		start.max = datas; //结束日选好后，重置开始日的最大日期
	// 	}
	// };

	

    // startDate = ''
    // endDate = ''
  })

  function sure() {
    /*
    if (!query.condition.length) {
      alert('请输入查询内容')
			return
		}
    */
	// if(startDate == "") endDate = "";
	console.log(document.getElementById('startDate').value)
	console.log(document.getElementById('endDate').value)
	// let startDate=sessionStorage.getItem("startDate");
	// let endDate=sessionStorage.getItem("endDate");
	let startDate=document.getElementById('startDate').value;
	let endDate=document.getElementById('endDate').value;
	
	console.log(dispatch)
    dispatch('message', {
      start: startDate+' 00:00:00',
      end: endDate+' 23:59:59',
      types: type
    });
	
	
	
	
	
  }

  function activeFunc() {
    active = !active
  }

  function activeFuncAdminTwo() {
    active = !active
    role = '二级代理'
    type = 2
    // console.log(localStorage.getItem("uidId"))
  }

  function activeFuncAdminThree() {
    active = !active
    role = '三级代理'
    type = 3
    // console.log(localStorage.getItem("uidId"))
  }

  function activeFuncUser() {
    active = !active
    role = '普通用户'
    type = 1
    // console.log(localStorage.getItem("uidId"))
  }

  function reset() {
    window.location.reload()
  }
  
  
  function getQueryVariable(){
         var query = window.location.href;
		 console.log(query)
         str=query.substring(query.length-6)=='assets';
		 console.log(str)
         return(false);
  }
  getQueryVariable()
  
  

</script>

<div class="view">
		<!-- <input type="text" name="start_time" class="is-small select-date" id="startDate">
		<span class="line">—</span>
		<input type="text" name="end_time" class="is-small select-date mr-30" id="endDate"> -->

		<input type="text" name="start_time" class="is-small select-date" id="startDate">
		<span class="line">—</span>
		<input type="text" name="end_time" class="is-small select-date mr-30" id="endDate">



		<!-- <div class="layui-inline">
		<div class="layui-input-inline">
		<input type="text" name="start_time" class="layui-input" id="start_time"
		placeholder="开始时间(修改时间)">
		</div>
		</div>
		<div class="layui-inline">
		<div class="layui-input-inline">
		<input type="text" name="end_time" class="layui-input" id="end_time"
		placeholder="结束时间(修改时间)">
		</div>
		</div> -->


		<!--
		<button class="button is-small">筛选</button>
		<button class="button is-small">重置</button>
		-->
		{#if routeStatus}
		<div class="dropdown {active ? 'is-active' : 'active'}">
				<div class="dropdown-trigger" on:click={activeFunc}>
						<button style="width: 140px;" class="button" aria-haspopup="true" aria-controls="dropdown-menu">
								<img src="images/user.png" width="24px">
								<span style="padding: 0 4px">{role}</span>
								<span class="icon is-small">
		<i class="fa fa-sort-desc colorBlack" style="margin-top: -8px" aria-hidden="true"></i>
		</span>
						</button>
				</div>
				<div class="dropdown-menu" id="dropdown-menu" role="menu">
						<div class="dropdown-content">
								{#if adminOrUser}
								<div on:click={activeFuncAdminTwo} class="dropdown-item">
										二级代理
								</div>
								<hr class="dropdown-divider">
								{/if}
								<div on:click={activeFuncAdminThree} class="dropdown-item">
										三级代理
								</div>
								<hr class="dropdown-divider">
								<div on:click={activeFuncUser} class="dropdown-item">
										普通用户
								</div>
						</div>
				</div>
		</div>
		{/if}
		<div class="search-box">
				<img src="images/search-icon.png" class="search-icon" alt="search-icon">
				<input class="input  query-text" type="text" placeholder=" 单行输入" bind:value={query.condition}>
		</div>
		{#if isShowSureBtn}
		<button class="button is-link " style="margin-left: 32px; color: #fff" on:click={sure}>搜索</button>
		{/if}
		<button class="button is-link " style="color: #fff" on:click={reset}>重置</button>
		
		
		

</div>

<style lang="scss">
		.view {
				background: #fff;
				height: 90px;
				border-radius: 4px;
				display: flex;
				align-items: center;
				padding: 50px;

				.select-date {
						width: 220px;
						height: 40px;
						background: rgba(255, 255, 255, 1);
						border: 1px solid rgba(227, 227, 227, 1);
						border-radius: 4px;
						padding: 0 16px;
						box-sizing: border-box;
						font-size: 16px;
						color: #666;
				}

				.mr-30 {
						margin-right: 30px;
				}

				.line {
						margin: 15px;
				}

				.button {
						color: #999999;
						border-color: #999999;
						margin-right: 10px;
				}

				.search-box {
						width: 310px;
						/*margin-left: 54px;*/
						position: relative;

						.search-icon {
								width: 22px;
								height: 22px;
								position: absolute;
								z-index: 2;
								top: 50%;
								margin-top: -11px;
								left: 15px;
						}

						.query-text {
								padding-left: 50px;
								box-sizing: border-box;
						}
				}

		}

</style>
